<template>
	<view class="content">
		<image class="logo" :src="staticUrl+'/image/login/icon_AnnoyfreeLogo.png'" mode="widthFix"></image>
		<button v-if="!isAgree" class="getPhone" @click="pleaseDot()"> </button>
		<button v-else class="getPhone" open-type="getPhoneNumber"  @getphonenumber="getPhoneNumber" > </button>
		<image class="otherLogin" :src="staticUrl+'/image/login/img_otherLogin2.png'" mode="widthFix" @click="phoneLogin()"></image>
		<view class="protocolView">
			<view class="protocolContent">
				<image v-if="!isAgree" :src="staticUrl+'/image/login/dot.png'" style="width: 26rpx;height: 26rpx;" @click="agreeReadProtocol()"></image>
				<image v-if="isAgree" :src="staticUrl+'/image/login/dot_select.png'" style="width: 26rpx;height: 26rpx;" @click="agreeReadProtocol()"></image>
				<text class="Tips1" style="margin-left: 10rpx;" @click="agreeReadProtocol()">登录注册即表示您已阅读并同意易爱</text>
				<text class="Tips2" @click="toUserProtocol()">《用户协议》</text>
				<text class="Tips1">及</text>
				<text class="Tips2" @click="toPrivacyPolicy()">《隐私政策》</text>
			</view>
			<view v-if="isShowTips" class="tipArrow content">
				<text>请先阅读并勾选用户协议</text>
			</view>
		</view>
		<!-- 个人信息保护指引 -->
		<uni-popup ref="guidePopup" :mask-click="false" :safe-area="false" type="dialog">
			<view class="guidePop">
				<text class="guidePop-text">免烦脑用户个人信息保护指引</text>
				<scroll-view scroll-y="true" class="scrollView"><rich-text :nodes="guideTxt"></rich-text></scroll-view>
				<view class="agreeNext flex-c" @click="agreeNext()"><text>同意并继续</text></view>
				<!-- #ifdef MP-WEIXIN -->
				<navigator class="refuseExit" target="miniProgram" open-type="exit">放弃并退出</navigator>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<text class="refuseExit" @click="refuseExit()">放弃并退出</text>
				<!-- #endif -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	const app = getApp();
	import * as api from '@/api/login';
	import { isNull } from '@/utils/utils.js';
	import store from '@/store';
	export default {
		data() {
			return {
				staticUrl:this.$config.StaticUrl,
				isAgree: false, //是否同意协议
				isShowTips: false, 
				phoneCode: '', //getPhone获取的
				code: '', //getCode 获取的
				guideTxt: ''
			}
		},
		onLoad() {
			console.log('onload');
			this.guideTxt =
				'<div style="line-height: 25px;font-size:26rpx;color: #333;text-indent:2em"><p>&nbsp;尊敬的用户，非常感谢您使用免烦脑脑血管预警头环和免烦脑监测预警服务，我们深知保护个人隐私信息的重要性，所以请您在使用前,仔细阅读并充分理解《用户协议》和《隐私政策》的内容。</p ><br/><p>如您同意《用户协议》和《隐私政策》,请点击“同意并继续”，开始使用我们的产品和服务。我们将严格按照协议及政策内容使用和保护您的个人信息，为您提供更优质的服务。</p ><br/><br/>免责声明:<br/><p>请您谨记免烦脑仅提供日常监测及风险预警服务， 监测结果与预警数据仅作为健康参考，不能作为服药依据，并不能代替医疗专业人士的临床诊断，更不具有治疗功效。免烦脑旨在对用户进行早期脑血管疾病的趋势判断及风险预警，提高用户对自身健康的认知。如果您有任何健康或医疗方面的问题，请咨询专业医疗人员。以上内容的最终解释权归江苏易爱健康科技有限公司所有，感谢您的配合与支持，祝您生活愉快。</p ></div>';
		},
		mounted() {
			this.$refs.guidePopup.open('center');
		},
		methods: {
			// 同意保护指引
			agreeNext() {
				this.$refs.guidePopup.close();
			},
			// 拒绝 退出
			refuseExit() {
				if (uni.getSystemInfoSync().platform == 'ios') {
					plus.ios
						.import('UIApplication')
						.sharedApplication()
						.performSelector('exit');
				} else if (uni.getSystemInfoSync().platform == 'android') {
					plus.runtime.quit();
				}
			},
			pleaseDot(){
				if(!this.isAgree){
					this.isShowTips = true
					return
				}
			},
			getPhoneNumber(e){
				console.log(e);
				if(e.detail.errMsg == "getPhoneNumber:fail user deny") {
					this.$toast('您已取消授权')
					return
				}
				this.phoneCode = e.detail.code
				this.getCode()
			},
			getCode(){
				let that = this
				wx.login({
					success(res) {
						console.log('getCode success',res);
						// that.code = res.code
						that.thirdPartyAuth(res.code)
					},fail(err){
						console.log('getLogin fail',err);
					}
				})
			},
			// 将手机号的code和getCode功能上传至服务器中
			thirdPartyAuth(wxAuthCode){
				let that = this
				let data = {
					action: 'wxProgramLogin',
					params: {
						wxAuthCode,
						wxMobileCode: that.phoneCode,
						role: 'EiUser',
						uuid: that.$store.state.deviceUUID,
					}
				}
        console.log("手机号123",data)
				api.thirdPartyAuth(data).then(function(res){
					console.log('thirdPartyAuth success',res);
					if (res.data.code == 2000) {
						let appId = res.data.data.appIdInfo.appId;
						let appSecret = res.data.data.appIdInfo.appSecret;
						let userId = res.data.data.appIdInfo.userId;
						let phone = res.data.data.mobile;
						store.commit('token',res.data.data.appIdInfo.token);
						let userInfo = uni.getStorageSync('userInfo');
						if (isNull(userInfo)) {
							// first login
							userInfo = {
								currentUser: {
									userId: userId,
									appId: appId,
									appSecret: appSecret,
									phone: phone
								},
								loginUserList: [
									{
										userId: userId,
										appId: appId,
										appSecret: appSecret,
										phone: phone
									}
								]
							};
						} else {
							// agin 将当前登录的用户信息更新到currentUser中去
							userInfo.currentUser = {
								userId: userId,
								appId: appId,
								appSecret: appSecret,
								phone: phone
							};
							let isNewUser = true;
							// 更新用户列表 (已经存在的用户就更新其个人信息 ,新用户则直接添加)
							userInfo.loginUserList.forEach(item => {
								if (item.userId == userId) {
									item.appId = appId;
									item.appSecret = appSecret;
									item.phone = phone;
									isNewUser = false;
								}
							});
							if (isNewUser) {
								userInfo.loginUserList.push(userInfo.currentUser);
							}
						}
						try {
							uni.setStorageSync('userInfo', userInfo);
							store.commit('userInfo', userInfo);
							/* 轮询 tokenId */
							app.getTokenIdPolling();
							that.getUserInfo();
						} catch (e) {
							//TODO handle the exception
							console.log('缓存失败', e);
						}
					}
				}).catch(function(err){
					console.log('thirdPartyAuth fail',err);
				})
			},
			getUserInfo() {
				let that = this;
				let userId = this.$store.state.userInfo.currentUser.userId;
				let data = {
					userId: userId,
					action: 'getUserInfo'
				};
				//调用接口请求个人信息
				api.getUserInfo(data).then(function(res) {
						console.log('getUserInfo::', res);
						if (res.data.message == 'userInfo is null') {
							//用户未填写个人信息  跳
							uni.redirectTo({
								url: '../fillHealhyRecords/noInfo'
							});
						} else {
							that.$store.commit('userBaseInfo', res.data.data)
							uni.switchTab({
								url:'/pages/detection/detection'
							})
						}
					})
					.catch(function(error) {
						console.log('get userInfo fail', error);
					});
			},
			//手机号方式登录
			phoneLogin(){
				if(!this.isAgree){
					this.isShowTips = true
					return
				}
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			// 同意并阅读协议
			agreeReadProtocol() {
				this.isAgree = !this.isAgree;
				if(this.isAgree) this.isShowTips = false
			},
			// 用户协议
			toUserProtocol() {
				console.log('用户协议');
				uni.navigateTo({
					url: '../../mine/systemSetting/aboutUs/webView?index=0'
				});
			},
			// 隐私政策
			toPrivacyPolicy() {
				uni.navigateTo({
					url: '../../mine/systemSetting/aboutUs/webView?index=1'
				});
			},
		}
	}
</script>

<style>
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.logo{
	margin-top: 336rpx;
	width: 343rpx;
}
.getPhone {
	margin-top: 236rpx;
	width: 680rpx;
	height: 86rpx;
	border-radius: 50px;
	background-image: url("https://xch.jseihc.com/public/platform/userApp/static/image/login/img_wechatLogin.png");
	background-size: 100% 100%;
}
.otherLogin {
	margin-top: 28rpx;
	width: 682rpx;
}
.protocolView {
	margin-top: 50rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.protocolContent {
	display: flex;
	align-items: center;
}
.flex-c {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.Tips1 {
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #666666;
}
.Tips2 {
	font-size: 22rpx;
	font-family: Source Han Sans CN;
	font-weight: normal;
	color: #0659c7;
	line-height: 30px;
}
.tipArrow {
	align-self: flex-start;
	margin-left: -15rpx;
	margin-top: 15rpx;
	width: 400rpx;
	height: 50rpx;
	background-color: #6c6c6c;
	position: relative;
	border-radius: 12rpx;
}
.tipArrow text {
	color: #fff;
	font-size: 24rpx;
}
.tipArrow:after {
	content: "";
	position: absolute;
	left: 20rpx;
	top: -9rpx;
	width: 18rpx;
	height: 18rpx;
	/* margin-left: -5px; */
	background-color: #6c6c6c;
	transform: rotate(
		-45deg
	);
}
.guidePop {
	width: 603rpx;
	height: auto;
	background-color: white;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	/* justify-content: space-between; */
}
.guidePop-text {
	margin-top: 66rpx;
	font-size: 36rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: #333333;
}
.scrollView {
	margin: 50rpx auto;
	width: 500rpx;
	height: 450rpx;
}
.agreeNext {
	width: 500rpx;
	height: 90rpx;
	border-radius: 12rpx;
	background-color: #0659c7;
}
.agreeNext text {
	font-size: 35rpx;
	font-family: Source Han Sans SC;
	font-weight: bold;
	color: white;
}
.refuseExit {
	margin-top: 30rpx;
	margin-bottom: 44rpx;
	font-size: 26rpx;
	font-family: Source Han Sans SC;
	font-weight: normal;
	color: #0659c7;
}
/* 错误抖动动画  */
.loginBtn-shake {
	animation: shake 0.3s !important;
}
</style>
